/********* 公共样式表 *********/
/*------------ 设置未知宽高子元素垂直水平居中 ------------*/
.w_h_flex{
  display: flex;
  align-items: center;
  justify-content: center;
}

/*------------ 单行文本不换行 ------------*/
.oneTextnoWrap{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*------------ 设置多行文本溢出隐藏 ------------*/
.generate-line-clamp(@n: 5) when (@n > 1) {
  .text_@{n}_hidden {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @n;
    overflow: hidden;
  }
  .generate-line-clamp(@n - 1);
}
.generate-line-clamp();

/*------------ 背景色 ------------*/
// 背景色生成
@bg-colors: {
  rgb01: rgba(0, 0, 0, 0.1);
  rgb02: rgba(0, 0, 0, 0.2);
  rgb03: rgba(0, 0, 0, 0.3);
  rgb04: rgba(0, 0, 0, 0.4);
  rgb05: rgba(0, 0, 0, 0.5);
  rgb06: rgba(0, 0, 0, 0.6);
  rgb07: rgba(0, 0, 0, 0.7);
  rgb08: rgba(0, 0, 0, 0.8);
  rgbf1: rgba(255, 255, 255, 0.1);
  rgbf2: rgba(255, 255, 255, 0.2);
  rgbf3: rgba(255, 255, 255, 0.3);
  rgbf4: rgba(255, 255, 255, 0.4);
  rgbf5: rgba(255, 255, 255, 0.5);
  rgbf6: rgba(255, 255, 255, 0.6);
  rgbf7: rgba(255, 255, 255, 0.7);
  rgbf8: rgba(255, 255, 255, 0.8);
  cc: #ccc;
  cf: #fff;
  cf1: #f1f1f1;
  cf5: #f5f5f5;
  cf5f7fa: #f5f7fa;
};

each(@bg-colors, {
  .bg_color_@{key} {
    background-color: @value;
  }
});

/*------------ 元素点击动作 ------------*/ 
/*--- a标签样式 ---*/
a:active{
  position: relative;
  top: 1px;
}
/*--- 通用点击效果 ---*/
.click:active{
  position: relative;
  top: 1px;
}

/*------------ 边框样式 ------------*/
@border-colors: {
  c3: #333;
  c6: #666;
  c9: #999;
  c0: #000;
  cc: #ccc;
  cf: #fff;
  ce9e9e9: #e9e9e9;
  cebeef5: #ebeef5;
};

each(@border-colors, {
  @color-key: @key;
  @color-value: @value;

  // 生成全边框
  .border_1_@{color-key} {
    border: 1px solid @color-value;
  }
  .border_2_@{color-key} {
    border: 2px solid @color-value;
  }

  // 生成方向边框
  .border_t_1_@{color-key} {
    border-top: 1px solid @color-value;
  }
  .border_r_1_@{color-key} {
    border-right: 1px solid @color-value;
  }
  .border_b_1_@{color-key} {
    border-bottom: 1px solid @color-value;
  }
  .border_l_1_@{color-key} {
    border-left: 1px solid @color-value;
  }
});

/*--- 边框弧度 ---*/
.borderR4{
  border-radius: 4px;
}
.borderR6{
  border-radius: 6px;
}
.borderP50{
  border-radius: 50%;
}
.borderTlr6{
  border-radius: 6px 6px 0 0;
}
.borderBlr6{
  border-radius: 0 0 6px 6px;
}
.borderBl6{
  border-radius: 6px 0 0 6px;
}
.borderBr6{
  border-radius: 0 6px 6px 0;
}

/*------------ 元素阴影 ------------*/
// 阴影颜色映射
@shadow-colors: {
  c0: #000;
  c3: #333;
  c6: #666;
  c9: #999;
  cc: #ccc;
  ce9: #e9e9e9;
};

@shadow-sizes: 4, 5, 10, 20;

each(@shadow-sizes, .(@s) {
  each(@shadow-colors, .(@color, @name) {
    .bs_@{s}_@{name} {
      box-shadow: ~"0 0 @{s}px @{color}" !important;
    }
  });
});

/*------------ 滚动条样式 ------------*/
.scroll-bar::-webkit-scrollbar { // 滚动条整体样式
  width: 10px;     // 高宽分别对应横竖滚动条的尺寸
  height: 1px;
}
.scroll-bar::-webkit-scrollbar-thumb { // 滚动条里面小方块
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}
.scroll-bar::-webkit-scrollbar-track { // 滚动条里面轨道
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  // border-radius: 10px;
  background: #EDEDED;
}
